<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="robots" content="INDEX,FOLLOW" />
    <link rel="shortcut icon" href="https://m.luvdress.com/favicon.ico" />
    <link rel="apple-touch-icon" href="https://m.luvdress.com/apple-touch-icon.png" />

    <title>Bootstrap w/ Webpack</title>
</head>

<body>
    <header class="sticky-top bg-white">
        <div class="container-fluid d-flex justify-content-between align-items-center">
            <!-- 左侧 -->
            <div class="d-flex align-items-center">
                <!-- 字体图标按钮（唤出分类列表） -->
                <button class="btn me-3" id="toggle-aside">
                    <i class="fa-solid fa-bars fa-lg"></i>
                </button>
                <!-- Logo -->
                <a href="#" class="navbar-brand">
                    <img src="https://img.luvdress.com/media/upload/4/iv/4ivp13igdyqf3rm1727173088.png" alt="Logo"
                        style="height: 30px" />
                </a>
            </div>
            <!-- 右侧 -->
            <div class="d-flex align-items-center">
                <a href="#" class="btn me-2"><i class="fa-solid fa-user"></i></a>
                <a href="#" class="btn me-2"><i class="fa-solid fa-magnifying-glass"></i></a>
                <a href="#" class="btn position-relative">
                    <i class="fa-solid fa-cart-shopping"></i>
                    <span
                        class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3</span>
                </a>
            </div>
        </div>
    </header>

    

    <!-- 商品图片轮播 -->
    <section class="container mt-4">
        <div id="productCarousel" class="carousel slide" data-bs-ride="carousel">
            <!-- 指示器 -->
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
            </div>

            <!-- 轮播内容 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://img.luvdress.com/media/catalog/product/0/32/032f77a5f786d9dbbb81f1d74e3976b9.jpg.webp"
                        class="d-block w-100 carousel-image" alt="商品 1" />
                </div>
                <div class="carousel-item">
                    <img src="https://img.luvdress.com/media/catalog/product/8/77/8776cc16adfbcabeb6c0d9d44df31191.jpg.webp"
                        class="d-block w-100 carousel-image" alt="商品 2" />
                </div>
                <div class="carousel-item">
                    <img src="https://img.luvdress.com/media/catalog/product/e/26/e267f24386f2eefe4bae09f22548af42.jpg.webp"
                        class="d-block w-100 carousel-image" alt="商品 3" />
                </div>
            </div>

            <!-- 控制按钮 -->
            <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">上一张</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">下一张</span>
            </button>
        </div>

     

        <!-- 商品详情 -->
        <div class="border p-3 rounded">
            <h1>商品 1</h1>
            <p>价格：¥99.00</p>
            <p>Item Code: ABC123</p>
        </div>
    </section>
    <!-- Aside 分类列表 -->
    <aside id="aside-menu" class="offcanvas offcanvas-start" tabindex="-1">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Categories</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="list-group">
                <li class="list-group-item">
                    <a href="#" class="text-decoration-none">Category 1</a>
                </li>
                <li class="list-group-item">
                    <a href="#" class="text-decoration-none">Category 2</a>
                </li>
                <li class="list-group-item">
                    <a href="#" class="text-decoration-none">Category 3</a>
                </li>
            </ul>
        </div>
    </aside>
</body>

</html>